Gyazoにuploadした画像URLをコピペするPage Menu
2023-02-17 21:15:59 deprecated
CSPが壊れたFirefoxが手元になくなったので、どこからも使えなくなった
気が向いたらTamperMonkey依存のを作るかも
移動した
/icons/hr.icon
いちいちタブを開く必要がなくなる
https://gyazo.com/9974e33870bcaac4d0864cff7e8d3f62
使い方
2. 以下を自分のページに貼り付ける
code:js
import {GYAZO_ACCESS_TOKEN} from '/api/code/your-private-project/GYAZO_ACCESS_TOKEN/auth.js';
import {addGyazoMenu} from '/api/code/takker/Gyazoにuploadした画像URLをコピペするPage_Menu/script.js';
addGyazoMenu({GYAZO_ACCESS_TOKEN, imageNum: 10});
GYAZO_ACCESS_TOKENに1.で取得したAccess Tokenを入れる
Access Tokenは外部に漏れるとまずいので、private projectのコードブロックに貼り付けて、そこから読み込むことを推奨する
private projectのコードブロックなら、参加しているuser以外読み込むことができない
your-private-projectには自分のprivate projectの名前を入れる
code:your-private-project/GYAZO_ACCESS_TOKEN/auth.js
export const GYAZO_ACCESS_TOKEN = XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX;
既知の問題
mobile版で動かない？
Loading...まではでるが、そこから何も変化しない
2021-01-02 11:05:34 エラーメッセージ
Uncaught (in promise) ReferenceError: timer is not defined
at loadGyazoImages (script.js:35)
ホントだ。tryの中でtimerを定義しちゃったから、catchで使えないんだ
ん？てことはAPI叩くのに失敗しているのか？
2021-01-02 11:08:31 catch内部でのエラー内容
index.js:49 Refused to connect to https://api.gyazo.com/api/images?access_token=...&per_page=10 because it violates the following Content Security Policy directive: connect-src 'self' i.gyazo.com wss://scrapbox.io https://upload.gyazo.com https://gyazo.com https://storage.googleapis.com https://sentry.io.
CSPに引っかかった？
じゃあなんでPC版FirefoxからだとAPI叩けるんだ？
browserの種類にかかわらず、mobileではapi.gyazo.comにアクセスできないみたい
流石にちぐはぐな挙動なので、報告しておいた
code:script.js
import {isMobile} from '/api/code/takker/mobile版scrapboxの判定/script.js';
const id = 'Gyazo Viewer';
export function addGyazoMenu({GYAZO_ACCESS_TOKEN, imageNum, theme = 'light'} = {}) {
if (isMobile()) {
scrapbox.PageMenu.addMenu({
title: 'Gyazo',
});
} else {
scrapbox.PageMenu.addMenu({
title: id,
onClick: () => loadGyazoImages({GYAZO_ACCESS_TOKEN, imageNum, theme}),
});
}
}
async function loadGyazoImages({GYAZO_ACCESS_TOKEN, imageNum, theme}) {
let timer = null;
try {
const promise = fetch(https://api.gyazo.com/api/images?access_token=${GYAZO_ACCESS_TOKEN}&per_page=${imageNum});
// 読み込みに時間がかかるようであれば、読み込み中の表示を出す
timer = setTimeout(() => {
scrapbox.PageMenu(id).addItem({
title: 'Loading...',
image: https://img.icons8.com/ios/180/${theme === 'dark' ? 'FFFFFF/' : ''}loading.png,
onClick: () => {},
})},
100);
const res = await promise;
const images = await res.json();
clearTimeout(timer);
scrapbox.PageMenu(id).removeAllItems();
images.filter(image => image.image_id !== '')
.forEach(image =>
scrapbox.PageMenu(id).addItem({
title: image.metadata.title ?? 'Untitled',
image: image.url,
onClick: () => navigator?.clipboard?.writeText?.(image.permalink_url),
})
);
} catch(e) {
clearTimeout(timer);
scrapbox.PageMenu(id).removeAllItems();
scrapbox.PageMenu(id).addItem({
title: 'Failed to load the image list.',
image: https://i.gyazo.com/9fb0ce04c8ce55890f1388e21f36dccc.png,
onClick: () => {},
});
console.log('Failed to load the image list. %o',e);
}
}
